<script setup>
// 1.reactive:接收一个对象类型的数据，返回响应式的对象
import {reactive} from 'vue'
const state_reactive =reactive({
  count_1:1,
  count_2:20,
  count_3:300,
})
const setcount_reactive = ()=>{
  state_reactive.count_1++,
  state_reactive.count_2++,
  state_reactive.count_3++
}

//2.ref:接收简单类型或复杂类型，返回一个响应式的对象
// 本质:是在原有传入数据的基础上，外层包了一层对象，包成了复杂数据类型
// 底层，包成复杂类型之后，再借助reactive 实现的响应式
// 注意点:
// 1.脚本中访问数据，需要通过.value
// 2.在template中，.value不需要加(帮我们扒了一层)
// 推荐:以后声明数据，统一用ref=>统一了编码规范
import {ref} from 'vue'
const count = ref(10)
const array = ref([1,2,3,4,5,6])
console.log(count.value);
console.log(array.value);
const setcount = ()=>{
  count.value++
}

</script>

<template>
  <header>
    <div @click="setcount_reactive()" style="border: 1px solid red;">
      <span>reactive:接收一个对象类型的数据，返回个响应式的对象</span><br/>
      count_1:{{ state_reactive.count_1 }}<br/>
      count_2:{{ state_reactive.count_2 }}<br/>
      count_3:{{ state_reactive.count_3 }}<br/>
    </div>


    <div @click="setcount()" style="border: 1px solid green;margin-top: 50px;">
      <span>ref:接收简单类型或复杂类型，返回一个响应式的对象</span><br/>
      {{count}}<br/>
      {{array}}<br/>
      {{array[0]}}<br/>
    </div>
  </header>
</template>

<style scoped>
</style>
